<template>
    <div style="width: 100%;height: 288px;" ref="monitorChartRef"></div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import * as echarts from 'echarts/core';
import { LegendComponent } from 'echarts/components';
import { RadarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([LegendComponent, RadarChart, CanvasRenderer]);

const monitorChartRef = ref(null);
let monitorChart: any = null;
const props = defineProps({
    chartData: Object,
})
const initEchart = () => {
    const monitorChart = echarts.init(monitorChartRef.value);
    const monitorOption = {
        radar: {
            center: ['50%', '53%'], // 雷达图的中心位置
            indicator: [
                { name: '关联', max: props.chartData?.asset_package_total },
                { name: '入表', max: props.chartData?.asset_package_total },
                { name: '评价', max: props.chartData?.asset_package_total },
                { name: '登记', max: props.chartData?.asset_package_total },
                { name: '合规', max: props.chartData?.asset_package_total }
            ],
            shape: 'circle',
            radius: ['30%', '80%'],
        },
        series: [
            {
                type: 'radar',
                data: [
                    {
                        value: [
                            props.chartData?.asset_package_has_resource, 
                            props.chartData?.asset_confirm_ru_biao, 
                            props.chartData?.asset_package_total - props.chartData?.asset_non_evaluation, 
                            props.chartData?.asset_package_total - props.chartData?.asset_non_registration, 
                            props.chartData?.asset_package_total - props.chartData?.asset_non_compliance, 
                        ],
                        itemStyle: {
                            color: '#4C7FFE'
                        }
                    },
                ]
            }
        ]
    }
    monitorChart.setOption(monitorOption);
}
watch(() => props.chartData, (newVal) => {
    initEchart();
})
onMounted(() => {
    initEchart();
    window.addEventListener('resize', () => {
        monitorChart && monitorChart.resize()
    })
});
onBeforeUnmount(() => {
    window.removeEventListener('resize', () => {
        monitorChart && monitorChart.resize()
    })
})
</script>
<style lang="less" scoped></style>